<template>
  <el-dialog
    :title="title"
    :visible.sync="openSheet"
    width="60%"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    :before-close="cancel"
  >
    <el-form ref="form" :model="form" :rules="rules" :label-width="labelWidth">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('serialNumber')" prop="serialNumberFK">
            <el-select v-model="form.serialNumberFK" style="width: 320px;" clearable filterable :placeholder="$t('inputserialNumber')">
              <el-option v-for="item in serialNumberOption" :key="item.serial_number" :label="item.serial_number" :value="item.id">
                <span style="float: left">{{ item.serial_number }}</span>
                <span style="float: right; font-size: 13px;color: var(--el-text-color-secondary);">{{ item.serial_name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('department')" prop="departmentFK">
            <el-select v-model="form.departmentFK" style="width: 320px;" clearable filterable :placeholder="$t('inputdepartment')">
              <el-option v-for="item in departmentOption" :key="item.name" :label="item.name" :value="item.id">
                <span style="float: left">{{ item.code }}</span>
                <span style="float: right;font-size: 13px;color: var(--el-text-color-secondary);">{{ item.name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('standardCurrency')" prop="standard_curr">
            <el-select v-model="form.standard_curr" style="width: 320px;" clearable allow-create filterable :placeholder="$t('inputstandardCurrency')">
              <el-option v-for="status in currencyOptions" :key="status.currency" :label="status.currency" :value="status.currency">
                <span style="float: left">{{ status.currency }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ status.currency_name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('projectPlanName')" prop="project_name">
            <el-input v-model="form.project_name" style="width: 320px;" :placeholder="$t('inputprojectPlanName')" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('startDate')" prop="start_date" :error="error.start_date">
            <el-date-picker v-model="form.start_date" style="width: 320px;" type="date" value-format="yyyy-MM-dd" :placeholder="$t('startDate')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('endDate')" prop="end_date" :error="error.end_date">
            <el-date-picker v-model="form.end_date" style="width: 320px;" type="date" value-format="yyyy-MM-dd" :placeholder="$t('endDate')" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- <el-form v-show="!createFlag" ref="versionform" :model="versionform" :label-width="labelWidth">
      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('versionContent')" prop="note">
            <el-input v-model="versionform.note" type="textarea" :placeholder="$t('versionContent')" clearable />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form> -->
    <div slot="footer" class="dialog-footer">
      <el-button v-if="createFlag" type="primary" @click="submitForm">{{
        $t('create')
      }}</el-button>
      <el-button v-else type="primary" @click="submitForm">{{
        $t('update')
      }}</el-button>
      <el-button @click="cancel">{{ $t('cancel') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import sheetMixin from '@/mixins/SheetMixin'
import { createProjectPlanBaseApi, updateProjectPlanBaseApi } from '../api/projectplanbase.api';
import { getSerialNumByUserListApi } from '@/views/master/serialnumber/api/serialnumber.api'
import { getDepartmentsByUserListApi } from '@/views/master/departments/api/departments.api'
import { getCurrencyListApi } from '@/views/master/currency/api/currency.api';

export default {
  mixins: [sheetMixin],
  data() {
    return {
      title: undefined,
      openSheet: false,
      createFlag: true,
      projectId: undefined,
      menuOptions: [],
      serialNumberOption: [],
      departmentOption: [],
      currencyOptions: [],
      form: {
        serialNumberFK: undefined,
        departmentFK: undefined,
        project_name: undefined,
        standard_curr: undefined,
        start_date: undefined,
        end_date: undefined
      },
      error: {
        serialNumberFK: undefined,
        departmentFK: undefined,
        project_name: undefined,
        standard_curr: undefined,
        start_date: undefined,
        end_date: undefined
      },
      versionform: {
        note: undefined
      },
      rules: {
        serialNumberFK: [{ required: true, message: this.$t('serialNumberRequired'), trigger: 'blur' }],
        start_date: [{ required: true, message: this.$t('startDateRequired'), trigger: 'blur' }],
        end_date: [{ required: true, message: this.$t('endDateRequired'), trigger: 'blur' }],
        project_name: [{ required: true, message: this.$t('projectPlanNameRequired'), trigger: 'blur' }],
        standard_curr: [{ required: true, message: this.$t('standardCurrencyRequired'), trigger: 'blur' }],
        departmentFK: [{ required: true, message: this.$t('departmentRequired'), trigger: 'blur' }]
      }
    };
  },
  computed: {
    labelWidth() {
      return this.$i18n.locale === 'en' ? '150px' : '80px';
    }
  },
  methods: {
    openSheetDialog(data) {
      this.openSheet = !this.openSheet;
      this.reset();
      this.initialize();
      if (data) {
        this.title = this.$t('projectPlanBaseUpdateTitle');
        this.createFlag = false;
        this.projectId = data.id;
        this.form = data;
      } else {
        this.title = this.$t('projectPlanBaseCreateTitle');
        this.createFlag = true;
        this.sampleId = undefined;
      }
    },
    initialize() {
      this.getSerialNumInfo()
      this.getDepartmentInfo()
      this.getCurrncyList()
    },
    // 从币种主表中获取币种
    async getCurrncyList() {
      var resp = await getCurrencyListApi()
      if (resp.success) {
        this.currencyOptions = resp.data.results;
      } else {
        this.targaMessageBox(this, resp.msg);
      }
    },
    reset() {
      this.resetForm('form');
      this.resetJsonObject(this.form)
    },
    cancel() {
      this.openSheet = !this.openSheet;
    },
    submitForm: function() {
      this.$refs['form'].validate(async(Valid) => {
        if (Valid) {
          this.resetJsonObject(this.error)
          var Resp;
          if (this.createFlag) {
            Resp = await createProjectPlanBaseApi(this.form);
          } else {
            Resp = await updateProjectPlanBaseApi(this.projectId, this.form);
          }
          if (Resp.success) {
            this.$emit('refreshList');
            this.cancel();
            if (this.createFlag) {
              this.targaMessage(this.$t('createSuccess', {
                title: this.$t('serialNumber'),
                value: this.form.serialNumberFK
              }));
            } else {
              this.targaMessage(this.$t('updateSuccess', {
                title: this.$t('serialNumber'),
                value: this.form.serialNumberFK
              }));
            }
          } else {
            if (typeof Resp.msg === 'object') {
              this.error = Resp.msg;
            } else {
              this.targaMessageBox(this, Resp.msg);
            }
          }
        }
      });
    },
    // 获取制番List
    async getSerialNumInfo(query) {
      var resp = await getSerialNumByUserListApi({ search: query, page: 1, page_size: 20 })
      if (resp.success) {
        this.serialNumberOption = resp.data.results;
      } else {
        this.serialNumberOption = [];
      }
    },
    // 获取部门List
    async getDepartmentInfo(query) {
      var resp = await getDepartmentsByUserListApi({ search: query, page: 1, page_size: 20 })
      if (resp.success) {
        this.departmentOption = resp.data.results;
      } else {
        this.departmentOption = [];
      }
    }
  }
};
</script>

<style scoped>
 /* 通用输入框样式 */
 /* ::v-deep .el-input input,
::v-deep .el-select .el-input__inner,
::v-deep .el-date-editor .el-input__inner {
  width: 160px;
  box-sizing: border-box;
} */
/* 设置所有的el-form-item__label标签的文本对齐方式为右对齐 */
/* ::v-deep .el-form-item__label {
    text-align: right;
  } */
</style>
